{% extends 'base.html' %}

{% block content %}
    <div class="container mt-4 text-white">
        <h2 class="text-center mb-4">曲谱列表</h2>
        <div class="row">
            {% for tab in guitar_tabs %}
                <div class="col-6 col-md-4 col-lg-2 mb-3">
                    <div class="guitar-tab-item text-center p-2" style="background-color: #2c2c2c; border-radius: 5px;">
                        <img src="{{ tab.cover_path }}" alt="{{ tab.name }}" class="img-fluid mb-2 rounded"
                             style="width: 100%; height: 150px; object-fit: cover;">
                        <h6>{{ tab.name }}</h6>
                        <p class="small mb-1">By {{ tab.author }}</p>
                        <p class="small mb-1">
                            Type:
                            {% if tab.type == 1 %}
                                弹唱
                            {% elif tab.type == 2 %}
                                指弹
                            {% else %}
                                Unknown
                            {% endif %}
                        </p>
                        <a href="{% url 'guitar_tab_detail' tab.id %}" class="btn btn-outline-light btn-sm">点击查看</a>
                    </div>
                </div>
            {% endfor %}
        </div>
        <nav aria-label="Page navigation" class="mt-4">
            <ul class="pagination justify-content-center">
                {% if guitar_tabs.has_previous %}
                    <li class="page-item"><a class="page-link bg-dark text-white"
                                             href="?page={{ guitar_tabs.previous_page_number }}">上一页</a></li>
                {% else %}
                    <li class="page-item disabled"><a class="page-link bg-dark text-muted" href="#">上一页</a></li>
                {% endif %}

                {% for num in guitar_tabs.paginator.page_range %}
                    {% if guitar_tabs.number == num %}
                        <li class="page-item active"><a class="page-link bg-light text-dark"
                                                        href="?page={{ num }}">{{ num }}</a></li>
                    {% else %}
                        <li class="page-item"><a class="page-link bg-dark text-white"
                                                 href="?page={{ num }}">{{ num }}</a></li>
                    {% endif %}
                {% endfor %}

                {% if guitar_tabs.has_next %}
                    <li class="page-item"><a class="page-link bg-dark text-white"
                                             href="?page={{ guitar_tabs.next_page_number }}">下一页</a></li>
                {% else %}
                    <li class="page-item disabled"><a class="page-link bg-dark text-muted" href="#">下一页</a></li>
                {% endif %}
            </ul>
        </nav>
    </div>
{% endblock %}
